import React from 'react';


import classnames from 'classnames';
//component


import './index.less';


export default class view extends React.Component {
    static propTypes = {
        //name: React.PropTypes.string,
    };

    static defaultProps = {
        //name: 'component name'
    };


    constructor(props, context) {

        super(props, context);


        // init state;
        this.state = {};
    }

    componentWillMount() {
        this._isMounted = true;

    }

    componentDidMount() {

    }

    componentWillUnmount() {
        this._isMounted = false;
    }

    render() {

        const classNames = classnames({
            'phone-state-wrapper': true,
            [this.props.className]: this.props.className ? true : false
        });

        const {stateIndex, stateData} = this.props;
        let lineStyle = {
            width: `${100 / stateData.length}%`,
            transform: `translate(${stateIndex * 100}%, 0)`
        };

        return (
            <ul className={classNames}>
                {
                    stateData.map((item, index) => {
                        return (
                            <li key={index} className="phone-state-item"
                                onClick={(e) => this.props.toggleState(e, index)}>
                                <span className={stateIndex === index && 'active'}>{item}</span>
                            </li>
                        )
                    })
                }
                <span className="translate-line" style={lineStyle}/>
            </ul>
        );
    }
}
